import React, { useRef } from 'react';
import { View, Text, StyleSheet, Animated, Easing } from 'react-native';

interface LoadingProps {
  message?: string;
}

const Loading: React.FC<LoadingProps> = ({ message = 'Measuring...' }) => {
  const animations = useRef(
    Array(5)
      .fill(0)
      .map(() => ({
        scale: new Animated.Value(1),
        opacity: new Animated.Value(0.5),
        translateY: new Animated.Value(0),
      }))
  ).current;

  React.useEffect(() => {
    const startAnimations = () => {
      const anims = animations.map((anim, index) => {
        const delay = index * 200;
        return Animated.loop(
          Animated.sequence([
            Animated.parallel([
              Animated.timing(anim.scale, {
                toValue: 1.3,
                duration: 600,
                delay,
                easing: Easing.out(Easing.ease),
                useNativeDriver: true,
              }),
              Animated.timing(anim.opacity, {
                toValue: 1,
                duration: 600,
                delay,
                easing: Easing.out(Easing.ease),
                useNativeDriver: true,
              }),
              Animated.timing(anim.translateY, {
                toValue: -20,
                duration: 600,
                delay,
                easing: Easing.out(Easing.ease),
                useNativeDriver: true,
              }),
            ]),
            Animated.parallel([
              Animated.timing(anim.scale, {
                toValue: 1,
                duration: 600,
                easing: Easing.in(Easing.ease),
                useNativeDriver: true,
              }),
              Animated.timing(anim.opacity, {
                toValue: 0.5,
                duration: 600,
                easing: Easing.in(Easing.ease),
                useNativeDriver: true,
              }),
              Animated.timing(anim.translateY, {
                toValue: 0,
                duration: 600,
                easing: Easing.in(Easing.ease),
                useNativeDriver: true,
              }),
            ]),
          ])
        );
      });

      anims.forEach((anim) => anim.start());
    };

    startAnimations();

    return () => {
      animations.forEach((anim) => {
        anim.scale.stopAnimation();
        anim.opacity.stopAnimation();
        anim.translateY.stopAnimation();
      });
    };
  }, []);

  // 测距相关的图标数组
  const measureIcons = ['R', 'U', 'L', 'E', 'R'];

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <View style={styles.iconsContainer}>
          {measureIcons.map((letter, index) => (
            <Animated.View 
              key={index} 
              style={[
                styles.letterContainer, 
                {
                  transform: [
                    { scale: animations[index].scale },
                    { translateY: animations[index].translateY }
                  ],
                  opacity: animations[index].opacity,
                  marginLeft: index === 0 ? 0 : -15,
                  zIndex: measureIcons.length - index,
                  elevation: measureIcons.length - index,
                }
              ]}
            >
              <View style={styles.letterCircle}>
                <Text style={styles.letter}>{letter}</Text>
              </View>
            </Animated.View>
          ))}
        </View>
        <Text style={styles.message}>{message}</Text>
        <Text style={styles.subMessage}>Please wait...</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 9999,
  },
  content: {
    alignItems: 'center',
  },
  iconsContainer: {
    flexDirection: 'row',
    marginBottom: 20,
    height: 60,
  },
  letterContainer: {
    width: 50,
    height: 50,
  },
  letterCircle: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#4A90E2',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  letter: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  message: {
    fontSize: 18,
    color: '#333',
    fontWeight: '600',
    marginTop: 10,
  },
  subMessage: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});

export default Loading;